<template>
  <div class="webview-container">
    <webview v-if="!isBrowserEnv && !hasCSPRestriction" :src="url" class="webview-content" partition="persist:webview">
    </webview>
    <iframe-app v-else :url="url"></iframe-app>
  </div>
</template>

<script>
import IframeApp from '@/components/IframeApp/index.vue'

export default {
  name: 'WebViewApp',
  components: {
    IframeApp
  },
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isBrowserEnv: typeof window !== 'undefined' && !window.process?.versions?.electron,
      hasCSPRestriction: false
    }
  },
  async created() {
    try {
      const response = await fetch(this.url, { method: 'HEAD' });
      const cspHeader = response.headers.get('content-security-policy');
      if (cspHeader && cspHeader.includes('frame-ancestors')) {
        this.hasCSPRestriction = true;
      }
    } catch (error) {
      console.error('CSP检测失败:', error);
    }
  },
  beforeUnmount() {
    if (!this.isBrowserEnv) {
      const webview = document.querySelector('.webview-content')
      if (webview) {
        webview.src = 'about:blank'
        webview.remove()
      }
    }
  }
}
</script>

<style scoped>
.webview-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.webview-content {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
